import React from 'react';
import { useEffect } from 'react';
import { connect } from 'react-redux'
import actions from '../store/actions/kind';
const Kind = ({ categoryList,  getCategoryList}) => {
  useEffect(() => {
    getCategoryList()
  }, [getCategoryList])
  return (
    <div>
      <h1>Kind</h1>
      <ul>
        {
          categoryList && categoryList.map(item => {
            return (<li key = { item }>{item}</li>)
          })
        }
      </ul>
    </div>
  );
};

// { state: { list : {  categoryList }}}
export default connect(({ kind: { categoryList } }) => {
  return {
    categoryList
  }
}, (dispatch) => {
  return {
    getCategoryList () {
      dispatch(actions.getCategoryListAction)
    }
  }
})(Kind);